<template>
  <div>
    <el-card class="box-card carone">
      <div class="text item textone">
        <el-button type="primary">excel 导入</el-button>
        <el-button type="success">excel 导出</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column prop="role[0].id" label="#">
          </el-table-column>
          <el-table-column prop="username" label="姓名">
          </el-table-column>
          <el-table-column prop="mobile" label="联系方式">
          </el-table-column>
          <el-table-column prop="address" label="头像">
            <template class="imgbox" slot-scope="scope">
              <el-avatar :size="60" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="角色">
            <template class="imgbox" slot-scope="scope">
              <el-tag size="mini">{{scope.row.role[0].title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="开通时间">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template class="imgbox" slot-scope="scope">
              <el-button type="primary" size="mini" @click.native="ToUserInfo(scope.row._id)">查看</el-button>

              <el-button type="info" size="mini">角色</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[2, 5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    员工管理
  </div>
</template>

<script>
export default {
  name: 'Event1Index',

  data() {
    return {
      pagenum:1,
      pagesize:2,
      userList:[],
      total:0,
    };
  },
  created(){
    this.getList()
  },
  mounted() {
    // console.log(this.pagesize);
  },

  methods: {
    async getList(){
      let res = await this.userApi.getUserList(this.pagenum,this.pagesize)
      // console.log(res);
      this.userList = res.list
      this.total = res.total
      // console.log(this.userList);
      // console.log(this.userList[0].openTime);
      // console.log(new Date(this.userList[0].openTime / 0.9));
    },
    handleSizeChange(newsize){
      //这里conso 选中第几页 最新的值
      // console.log(newsize)
      //最新的条数（newsize）赋值给 动态的 pagesie
      this.pagesize = newsize
      //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求      方法
      this.getList()
      },


       // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
      //  console.log(newPage)
       //把最新的页码（newPage）赋值给 动态的 pagenum 
       this.pagenum = newPage
       //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求     方法
       this.getList()
      },
      ToUserInfo(i){
        // console.log(i);
        let id = i
        // console.log(id);
        this.$router.push({path:`/user/info/${id}`})
      }
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  padding: 0 0 18px 0;
  margin-bottom: 22px;
  .textone {
    box-sizing: inherit;
    float: right;
  }

  // background-color: red;
}
</style>
